﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="text3 - 複製 .aspx.cs" Inherits="text3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link href="img/uboxiconR-02.ico" rel="SHORTCUT ICON" />
    <title>UBOX</title>

    <!-- Bootstrap Core CSS -->

    <%--<link href="sd/css/bootstrap.min.css" rel="stylesheet" />--%>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
    <!-- Custom CSS -->

    <link href="sd/css/sb-admin.css" rel="stylesheet" />
    <!-- Morris Charts CSS -->

    <link href="sd/css/plugins/morris.css" rel="stylesheet" />

    <!-- Custom Fonts -->

    <link href="sd/font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <%--[if lt IE 9]>--%>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <%--<![endif]--%>

    <script src="Scripts/responsive-nav.min.js"></script>
   
</head>
<body>
    <form id="form1" runat="server">
    <div id="wrapper">
        <!-- Navigation -->
        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <ul class="nav navbar-left top-nav">
                    <li>
                    <a class="navbar-brand" href="#"><img src="img/uboxiconR-02.png" class="img-responsive logo-nav" alt="UBOX" /></a>
                    </li>
                </ul>
                
            </div>

            <!-- Top Menu Items -->
            <div class="navbar navbar-static-top">

                <ul class="nav navbar-right top-nav">

                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i><b class="caret"></b></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i><b class="caret"></b></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i>John Smith <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><i class="fa fa-fw fa-user"></i>Profile</a></li>
                            <li><a href="#"><i class="fa fa-fw fa-envelope"></i>Inbox</a></li>
                            <li><a href="#"><i class="fa fa-fw fa-gear"></i>Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="#"><i class="fa fa-fw fa-power-off"></i>Log Out</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

            <!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav side-nav">

                    <li><a>&nbsp;&nbsp;<span class="glyphicon glyphicon-tower">&nbsp;&nbsp;註冊會員人數分析</span></a>

                    </li>
                    <li><a>&nbsp;&nbsp;<span class="glyphicon glyphicon-bullhorn">&nbsp;&nbsp;公告管理</span></a></li>
                    <li><a>&nbsp;&nbsp;<span class="glyphicon glyphicon-barcode">&nbsp;&nbsp;商品管理</span></a></li>
                    <li><a>&nbsp;&nbsp;<span class="glyphicon glyphicon-briefcase">&nbsp;&nbsp;開箱文管理</span></a></li>
                    <li><a>&nbsp;&nbsp;<span class="glyphicon glyphicon-user">&nbsp;&nbsp;會員管理</span></a></li>
                    <li><a>&nbsp;&nbsp;<span class="glyphicon glyphicon-comment">&nbsp;&nbsp;留言管理</span></a></li>
                    <li><a>&nbsp;&nbsp;<span class="glyphicon glyphicon-signal">&nbsp;&nbsp;分析管理</span></a></li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </nav>

<!-- Start/#page-wrapper ------------------------------------------------------------------------------------------------------------>        
        <div id="page-wrapper"><br/><br/>
            <!-- Start/.container-fluid -->
            <div class="container-fluid">
                <!-- Page Heading -->
                <!--會員註冊日期分析條件-->
                <div class="col-lg-4 ChartTest">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-money fa-fw"></i>註冊人數圖表條件</h3>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive ">
                            <!--內容--------------------------------------->
                                  起始年份:<select id="SelectCreatRegisterChartStartYear">
                                </select>
                                結束年份:<select id="SelectCreatRegisterChartEndYear">
                                </select>
                                圖表類型:<select id="RegisterChartType">
                                    <option value="0">長條圖</option>
                                    <option value="1">折線圖</option>
                                </select>
                                <input id="ButtonCreatRegisterChart" type="button" value="產生圖表"/>
                            <!--內容------------------------------------>
                            </div>
                            <div class="text-right">
                                <a href="#">Goto top<i class="fa fa-arrow-circle-up"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <!--會員年齡分析條件-->
                <div class="col-lg-4 ChartTest">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-money fa-fw"></i>會員年齡圖表條件</h3>
                        </div>
                        <div class="panel-body">
                            <div class="table-responsive ">
                            <!--內容--------------------------------------->
                                  起始年份:<select id="SelectCreatAgeChartStartYear">
                                </select>
                                結束年份:<select id="SelectCreatAgeChartEndYear">
                                </select>
                                年齡間隔:<select id="SelectCreatAgeChartAgeInterval">
                                    <option>5</option>
                                    <option selected="selected">10</option>
                                    <option>15</option>
                                    <option>20</option>
                                </select>
                                <input id="ButtonCreatAgeChart" type="button" value="產生圖表"/>
                            <!--內容------------------------------------>
                            </div>
                            <div class="text-right">
                                <a href="#">Goto top<i class="fa fa-arrow-circle-up"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="ContentHr"/>
            </div>
            <!-- /.container-fluid -->
        </div>
<!-- END/#page-wrapper ------------------------------------------------------------------------------------------------------------>   


        <blockquote class="blockquote-reverse">
            <footer id="footer">
                <div id="bottom-footer" class="container">
                    <div class="pull-left">
                        <p>
                            <strong><a href="#">UBOX</a></strong> Copyright &copy; 2014. All themes &copy; their respective owners |
                    Contact us at <strong><a href="mailto:contact@themeclue.com">contact@themeclue.com</a></strong>
                        </p>
                    </div>
                    <%-- <div class="pull-right"></div>--%>
                </div>
            </footer>
        </blockquote>
        <!-- bottom-footer -->
    </div>
    <!-- /#wrapper -->
    <!-- jQuery Version 1.11.0 -->

    <%--<script src="sd/js/jquery-1.11.0.js"></script>--%>
    <script src="Scripts/jquery-2.1.1.min.js"></script>
    <!-- Bootstrap Core JavaScript -->

    <%--<script src="sd/js/bootstrap.min.js"></script>--%>
    <script src="Scripts/bootstrap.min.js"></script>
    <!-- Morris Charts JavaScript -->

    <script src="sd/js/plugins/morris/raphael.min.js"></script>
    <!--圖表JS-------------------------------->
    <script src="./js/highcharts.js"></script>
    <script src="./js/modules/exporting.js"></script>
    <!--END圖表JS-------------------------------->
    <%--<script src="sd/js/plugins/morris/morris.min.js"></script>--%>
    <%--<script src="sd/js/plugins/morris/morris-data.js"></script>--%>
    </form>
</body>
        <script>
            $(function () {

                ChartNum = 1;/*圖表Div數*/
                /*Left選單滑鼠改成手式*/
                $(".glyphicon").mouseenter(function () {
                    $(this).css("cursor", "pointer");
                });
/*Register=========================================================*/
                /*Register起始與結束選單初始化*/
                $.ajax({
                    url: "PeopleAnalysis.ashx"
                    , type: "post"
                    , data: "type=2"
                    , success: function (data) {
                        $.each(data, function (name, value) {
                            $.each(value, function () {
                                var SelectOption = CreateYearSelectOption(this.StartYear, this.EndYear);
                                $("#SelectCreatRegisterChartStartYear").html(SelectOption);
                                SelectOption = CreateYearSelectOption($("#SelectCreatRegisterChartStartYear").find(":selected").text(), this.EndYear);
                                $("#SelectCreatRegisterChartEndYear").html(SelectOption);
                            });
                        });
                    }
                });
                /*Register圖表產生*/
                $("#ButtonCreatRegisterChart").click(function () {　
                    ChartTitle = "會員註冊分析圖表";
                    switch ($("#RegisterChartType").val())
                    {
                        case '0':
                            CreateChartDiv(ChartNum,ChartTitle);
                            CreateRegisterChart(
                                ChartNum,
                                $("#SelectCreatRegisterChartStartYear").find(":selected").text(),
                                $("#SelectCreatRegisterChartEndYear").find(":selected").text()
                                );
                            ChartNum++;
                            break;
                        case '1':
                            CreateChartDiv(ChartNum, ChartTitle);
                            CreateRegisterChart2(
                                ChartNum,
                                $("#SelectCreatRegisterChartStartYear").find(":selected").text(),
                                $("#SelectCreatRegisterChartEndYear").find(":selected").text()
                                );
                            ChartNum++;
                            break;
                    }
                });
                /*改SelectCreatRegisterChartEndYear選單*/
                $("#SelectCreatRegisterChartStartYear").change(function () {
                    $.ajax({
                        url: "PeopleAnalysis.ashx"
                        , type: "post"
                        , data: "type=2"
                        , success: function (data) {
                            $.each(data, function (name, value) {
                                $.each(value, function () {
                                    /*Ajax裡this已不是#SelectCreatRegisterChartStartYear*/
                                    var SelectOption = CreatYearSelectOption($("#SelectCreatRegisterChartStartYear").find(":selected").text(), this.EndYear);
                                    $("#SelectCreatRegisterChartEndYear").html(SelectOption);
                            });
                        });
                    }
                    });
                });
/*Age=========================================================*/
                /*Age起始與結束選單初始化*/
                $.ajax({
                    url: "PeopleAnalysis.ashx"
                    , type: "post"
                    , data: "type=2"
                    , success: function (data) {
                        $.each(data, function (name, value) {
                            $.each(value, function () {
                                var SelectOption = CreateYearSelectOption(this.StartYear, this.EndYear);
                                $("#SelectCreatAgeChartStartYear").html(SelectOption);
                                SelectOption = CreateYearSelectOption($("#SelectCreatAgeChartStartYear").find(":selected").text(), this.EndYear);
                                $("#SelectCreatAgeChartEndYear").html(SelectOption);
                            });
                        });
                    }
                });
                /*改SelectCreatAgeChartEndYear選單*/
                $("#SelectCreatAgeChartStartYear").change(function () {
                    $.ajax({
                        url: "PeopleAnalysis.ashx"
                        , type: "post"
                        , data: "type=2"
                        , success: function (data) {
                            $.each(data, function (name, value) {
                                $.each(value, function () {
                                    var SelectOption = CreateYearSelectOption($("#SelectCreatAgeChartStartYear").find(":selected").text(), this.EndYear);
                                    $("#SelectCreatAgeChartEndYear").html(SelectOption);
                                });
                            });
                        }
                    });
                });
                /*Age圖表產生*/
                $("#ButtonCreatAgeChart").click(function () {
                    ChartTitle = "會員年齡分析圖表";
                    
                    CreateChartDiv(ChartNum, ChartTitle);
                    CreateAgeChart(
                        ChartNum,
                        $("#SelectCreatAgeChartStartYear").find(":selected").text(),
                        $("#SelectCreatAgeChartEndYear").find(":selected").text(),
                        $("#SelectCreatAgeChartAgeInterval").find(":selected").text()
                        );
                    ChartNum++;
                });
            })
/*圖表共用=========================================================*/
            /*創造裝載圖表框*/
            function CreateChartDiv(ChartNum, ChartTitle) {
                Content = "<div class='col-lg-4 ChartTest'>";
                Content += "<div class='panel panel-default'>";
                Content += "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;</button>";
                Content += "<div class='panel-heading'>";
                Content += "<h3 class='panel-title'><i class='fa fa-money fa-fw'></i>" + ChartTitle + "</h3>";
                Content += "</div>";
                Content += "<div class='panel-body'>";
                Content += "<div class='table-responsive container' id='container" + ChartNum + "'>";
                Content += "</div>";
                Content += "<div class='text-right'>";
                Content += "<a href='#'>Goto top<i class='fa fa-arrow-circle-up'></i></a>";
                Content += "</div>";
                Content += "</div>";
                Content += "</div>";
                Content += "</div>";
                $("#ContentHr").after(Content);
            }
            /*創造年選單*/
            function CreateYearSelectOption(StartNum, EndNum) {
                var content = "";
                var j = 0;
                var num1 = parseInt(StartNum);
                var num2 = parseInt(EndNum);
                for (var i = num2 ; i >= num1 ; i--) {
                    content += "<option value='" + j + "'>" + i + "</option>";
                    j++;
                }
                return content;
            }
/*Age=========================================================*/
            /*創造Age直線圖*/
            function CreateAgeChart(ChartNum, StartYear, EndYear, AgeInterval)
            {
                $.ajax({
                    url: "PeopleAnalysis.ashx"
                    , type: "post"
                    , data: "type=3&start=" + StartYear + "&end=" + EndYear
                    , success: function (data) {
                        var Data = ConversionAgeChartData(data, new Date().getFullYear(), AgeInterval);
                        var PeopleMax = AgeDataPeopleMax(data, new Date().getFullYear(), AgeInterval) * 1.5;
                        var PeopleMin = PeopleMax * -1;
                        categories = eval(CreateAgeCategories(AgeInterval));
                $('#container' + ChartNum).highcharts({
                    chart: {
                        type: 'bar'
                    },
                    title: {
                        text: StartYear +"-"+EndYear+'會員年齡分佈圖表'
                    },
                    subtitle: {
                        text: '直線圖'
                    },
                    xAxis: [{
                        categories: categories,
                        reversed: false,
                        labels: {
                            step: 1
                        }
                    }, { // mirror axis on right side
                        opposite: true,
                        reversed: false,
                        categories: categories,
                        linkedTo: 0,
                        labels: {
                            step: 1
                        }
                    }],
                    yAxis: {
                        title: {
                            text: null
                        },
                        labels: {
                            formatter: function () {
                                return Math.abs(this.value) ;
                            }
                        },
                        min: PeopleMin,
                        max: PeopleMax
                    },
                    plotOptions: {
                        series: {
                            stacking: 'normal'
                        }
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + ', age ' + this.point.category + '</b><br/>' +
                                '人數: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
                        }
                    },
                    series: eval(Data)
                });
                    }
                });
            }
            /*資料轉換成AgeChart資料格式*/
            function  ConversionAgeChartData(data, year, AgeInterval)
            {
                Timenum1 = 0;
                Timenum2 = 0;
                FemaleNum = 0;
                MaleNum = 0;
                FIntervalyear = year - AgeInterval;
                MIntervalyear = year - AgeInterval;
                Content = "";
                MaleContent = "{name: 'Male',data: [";
                FemaleContent="{name: 'Female',data: [";
                $.each(data, function (name, value) {
                    $.each(value, function () {
                        if (this.sex == "F") {/*判別資料性別*/
                            if (FIntervalyear < this.year) {/*範圍內所有人數相加*/
                                FemaleNum = FemaleNum + this.PeopleNum;
                            }
                            else {
                                Timenum1++;
                                FIntervalyear = FIntervalyear - AgeInterval;/*移動範圍*/
                                if (Timenum1 == 1) {/*判別第一筆*/
                                    FemaleContent += FemaleNum;
                                }
                                else {
                                    FemaleContent += "," + FemaleNum;/*存入此範圍人數*/
                                }
                                while (FIntervalyear > this.year) {/*避免某範圍無資料*/
                                    FemaleContent += ",0";
                                    FIntervalyear = FIntervalyear - AgeInterval;
                                }
                                FemaleNum = this.PeopleNum;
                            }
                        }
                        else {
                            if (MIntervalyear < this.year) {
                                MaleNum = MaleNum + this.PeopleNum;
                            }
                            else {
                                Timenum2++;
                                MIntervalyear = MIntervalyear - AgeInterval;
                                if (Timenum2 == 1) {
                                    MaleContent += MaleNum * -1;
                                }
                                else {
                                    MaleContent += "," + (MaleNum * -1);
                                }
                                while (MIntervalyear > this.year) {
                                    MaleContent += ",0";
                                    MIntervalyear = MIntervalyear - AgeInterval;
                                }
                                MaleNum = this.PeopleNum;
                            }
                        }
                    });
                });

                if (FemaleNum == 0)
                { FemaleContent += "0"; }
                if (MaleNum == 0)
                { MaleContent += "0"; }
                if (Timenum2 == 0) {
                    MaleContent += (-1 * MaleNum) + "]}";
                }
                else {
                    MaleContent += "," + (-1 * MaleNum) + "]}";
                }
                if (Timenum1 == 0) {
                    FemaleContent += FemaleNum + "]}";
                }
                else {
                    FemaleContent += "," + FemaleNum + "]}";
                }
                Content += "[" + MaleContent + "," + FemaleContent + "]";
                return Content;
            }
            /*計算Age圖寬*/
            function AgeDataPeopleMax(data, year, AgeInterval)
            {
                Maxnum = 0;
                FemaleNum = 0;
                MaleNum = 0;
                FIntervalyear = year - AgeInterval;
                MIntervalyear = year - AgeInterval;
                $.each(data, function (name, value) {
                    $.each(value, function () {
                        if (this.sex == "F") {
                            if (FIntervalyear < this.year) {
                                FemaleNum = FemaleNum + this.PeopleNum;/*某範圍人數超過最多人數就取代最多人數*/
                                if (this.PeopleNum > Maxnum) { Maxnum = this.PeopleNum; }
                            }
                            else {
                                if (FemaleNum > Maxnum) { Maxnum = FemaleNum; }
                                Timenum1++;
                                FIntervalyear = FIntervalyear - AgeInterval;
                                FemaleNum = this.PeopleNum;
                            }
                        }
                        else {
                            if (MIntervalyear < this.year) {
                                MaleNum = MaleNum + this.PeopleNum;
                                if (this.PeopleNum > Maxnum) { Maxnum = this.PeopleNum; }
                            }
                            else {
                                if (MaleNum > Maxnum) { Maxnum = MaleNum; }
                                MIntervalyear = MIntervalyear - AgeInterval;
                                MaleNum = this.PeopleNum;
                            }
                        }
                    });
                });
                return Maxnum;
            }
            /*計算Age,Y軸值*/
            function CreateAgeCategories(AgeInterval)
            {
                content = "";
                content += "[";
                num1 = 0;
                num2 = AgeInterval - 1;
                num3 = parseInt(num2) + parseInt(AgeInterval);
                content += "'" + num1 + "-" + num2 + "'";
                while (num3 <= 110)
                {
                    num1 = num1 + parseInt(AgeInterval);
                    num2 = num2 + parseInt(AgeInterval);
                    num3 = parseInt(num2) + parseInt(AgeInterval);
                    content += ",'" + num1 + "-" + num2 + "'";
                }
                content += "]";
                return content;
            }
/*Register=========================================================*/
            /*資料轉換成RegisterChart資料格式*/
            function ConversionRegisterChartData(data, StartYear, EndYear) {
                content = "";
                content += "[";
                year = "";
                monthnum = 1;
                $.each(data, function (name, value) {
                    $.each(value, function () {
                        /*------------*/
                        // alert(content + "," + year + "," + this.year + "," + monthnum + "," + this.month)
                        if (year == "") {
                            /*防止某前幾年無資料*/
                            if (StartYear != this.year) {
                                for (var i = StartYear; i < this.year; i++) {
                                    content += "{name:[" + i + "],data:[0,0,0,0,0,0,0,0,0,0,0,0]},";
                                }
                            }
                            year = this.year;
                            content += "{";
                            content += "name:[" + year + "],";
                            content += "data:[";
                            if (monthnum == this.month) {
                                content += this.PeopleNum;
                            }
                            else {
                                content += "0";
                                for (var i = 2; i < this.month; i++) {
                                    content += ",0";
                                }
                                content += "," + this.PeopleNum;
                            }
                        }
                        else {
                            if ((this.year == year) && (monthnum == this.month)) {
                                content += "," + this.PeopleNum;
                            }
                            else if ((this.year == year) && (monthnum != this.month)) {
                                /*同年不同月*/
                                /*補足月*/
                                for (var i = monthnum; i < this.month; i++) {
                                    content += ",0";
                                }
                                content += "," + this.PeopleNum;
                            }
                            else {
                                if (year + 1 == this.year) {
                                    for (var i = monthnum; i < 12; i++) {
                                        content += ",0";
                                    }
                                    content += "]},";
                                    content += "{";
                                    content += "name:[" + this.year + "],";
                                    content += "data:[";
                                    monthnum = 1;
                                    if (this.month == 1) {
                                        content += this.PeopleNum;
                                    }
                                    else {
                                        for (var i = monthnum; i < this.month; i++) {
                                            if (i == 1) {
                                                content += "0";
                                            }
                                            else {

                                                content += ",0";
                                            }
                                        }
                                        content += "," + this.PeopleNum;
                                    }
                                    /*差一年*/
                                    /*補月足一年*/
                                }
                                else {
                                    for (var i = monthnum; i < 12; i++) {
                                        content += ",0";
                                    }
                                    year = year + 1;
                                    content += "]},";
                                    for (var i = year; i < this.year; i++) {
                                        content += "{name:[" + i + "],data:[0,0,0,0,0,0,0,0,0,0,0,0]},";
                                    }
                                    content += "{";
                                    content += "name:[" + this.year + "],";
                                    content += "data:[";
                                    monthnum = 1;
                                    for (var i = monthnum; i < this.month; i++) {
                                        if (i == 1) {
                                            content += "0";
                                        }
                                        else {

                                            content += ",0";
                                        }
                                    }
                                    content += "," + this.PeopleNum;
                                    /*差多年*/
                                    /*補多年補月*/
                                }
                            }
                        }
                        year = this.year
                        monthnum = this.month + 1;
                    });
                });
                content += "]}";
                /*防止某後幾年無資料*/
                if (EndYear != year) {
                    for (var i = year + 1; i <= EndYear; i++) {
                        content += ",{name:[" + i + "],data:[0,0,0,0,0,0,0,0,0,0,0,0]}";
                    }
                }
                content += "]";
                return content;
            }
            /*創造Register長條圖*/
            function CreateRegisterChart(ChartNum, StartYear, EndYear) {
                $.ajax({
                    url: "PeopleAnalysis.ashx"
                    , type: "post"
                    , data: "type=1&start=" + StartYear + "&end=" + EndYear
                    , success: function (data) {
                        var Data = ConversionRegisterChartData(data, StartYear, EndYear);
                        $('#container' + ChartNum).highcharts({
                            chart: { type: 'column' },
                            title: { text: StartYear + '-' + EndYear + '年每月註冊人數統計圖表' },
                            subtitle: { text: '長條圖' },
                            xAxis: {
                                categories: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月']
                            },
                            yAxis: { min: 0, title: { text: '人數' } },
                            tooltip: {
                                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                    '<td style="padding:0"><b>{point.y:.1f} 人</b></td></tr>',
                                footerFormat: '</table>',
                                shared: true,
                                useHTML: true
                            },
                            plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 } },
                            series: eval(Data)
                        });
                    }
                });
            }
            /*創造Register折線圖*/
            function CreateRegisterChart2(ChartNum, StartYear, EndYear) {
                /*  var chart = $('#container2').highcharts();加點方法
  chart.addSeries(
          {
              name: 'test',
              data: [100, 100, 100]
          });*/
                $.ajax({
                    url: "PeopleAnalysis.ashx"
                    , type: "post"
                    , data: "type=1&start=" + StartYear + "&end=" + EndYear
                    , success: function (data) {

                        var Data = ConversionRegisterChartData(data, StartYear, EndYear);
                        $('#container' + ChartNum).highcharts({
                            chart: { type: 'line' },
                            title: { text: StartYear + '-' + EndYear + '年每月註冊人數統計圖表' },
                            subtitle: { text: '折線圖' },
                            xAxis: {
                                categories: ['01月', '02月', '03月', '04月', '05月', '06月'
                                , '07月', '08月', '09月', '10月', '11月', '12月']
                            },
                            yAxis: { title: { text: '人數' } },
                            plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: false } },
                            series: eval(Data)
                        });
                    }
                });
            }

    </script>
</html>
  <style>
      .ChartTest {
          width:100%;
          }
      .container {
            width:100%;
            height:800px;
            }
    </style>
